<!--
 * @description:
 * @fileName: Search
 * @author: Sun MJ
 * @date: 2022/3/15-11:03
 * @version: V1.0.0
-->
<!--搜索表单组件 @author Sun MJ-->
<template>
  <div ref="screenRef" v-clickoutside="handleClose" class="screen-body">
    <div v-if="title" class="title">{{ title }}</div>
    <el-form label-width="60px" label-position="left" size="mini">
      <el-row :gutter="10" type="flex" style="align-items: stretch">
        <el-col :span="direction === 'row' ? 20 : 21">
          <el-row :gutter="40">
            <template v-for="(item,index) in data">
              <transition :key="index" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutUp">
                <el-col v-if="index < 7 ? true : flag" :key="index" :span="item.type === 'daterange' ? 10: span">
                  <el-form-item :label-width="item.labelWidth">
                    <span slot="label">
                      <el-tooltip :content="item.label" placement="left">
                        <span style="font-size: 12px">{{ item.label }}</span>
                      </el-tooltip>
                    </span>
                    <el-input v-if="item.type==='input'" v-model="SearchformInline[index]" :disabled="item.disabled" clearable :placeholder="'请输入'+item.label" />
                    <el-input v-if="item.type==='inputFocus'" v-model="SearchformInline[index]" :disabled="item.disabled" clearable :placeholder="'请输入'+item.label" @focus="onInputFocus(item.name,item.model)" />

                    <el-input-number
                      v-else-if="item.type==='number'"
                      v-model="SearchformInline[index]"
                      :disabled="item.disabled"
                      style="width: 100%"
                      controls-position="right"
                      :placeholder="'请输入'+item.label"
                      :min="1"
                      :max="100"
                    />

                    <el-select
                      v-else-if="item.type==='select'"
                      v-model="SearchformInline[index]"
                      filterable
                      class="size-full"
                      clearable
                      :placeholder="'请选择'+item.label"
                      @change="((val)=>{changeData(index, val)})"
                    >
                      <el-option
                        v-for="(option,key) in item.option"
                        :key="key"
                        :label="item.props ? option[item.props.label] : option.label"
                        :value="item.props ? option[item.props.value] : option.value"
                      />
                    </el-select>

                    <el-cascader
                      v-else-if="item.type==='cascader'"
                      v-model="SearchformInline[index]"
                      :disabled="item.disabled"
                      class="size-full"
                      clearable
                      filterable
                      :placeholder="'请选择'+item.label"
                      :props="item.props"
                      :options="item.option"
                    />

                    <el-select
                      v-else-if="item.type==='selectMultiple'"
                      v-model="SearchformInline[index]"
                      :disabled="item.disabled"
                      multiple
                      collapse-tags
                      filterable
                      class="size-full"
                      clearable
                      :placeholder="'请选择'+item.label"
                      @change="((val)=>{changeSelect(val, index)})"
                    >
                      <!--                <el-checkbox v-model="checked[index]" style="width: 100%;text-align: left;padding-right: 10px" @change="selectAll(index)">全选</el-checkbox>-->
                      <el-option v-for="(option,key) in item.option" :key="key" :label="option.label" :value="option.value" />
                    </el-select>

                    <el-date-picker
                      v-else-if="item.type==='date'"
                      v-model="SearchformInline[index]"
                      :disabled="item.disabled"
                      clearable
                      type="date"
                      style="width: 100%"
                      value-format="yyyy-MM-dd"
                      :placeholder="'请选择'+item.label"
                    />
                    <el-date-picker
                      v-else-if="item.type==='month'"
                      v-model="SearchformInline[index]"
                      :disabled="item.disabled"
                      clearable
                      type="month"
                      style="width: 100%"
                      value-format="yyyyMM"
                      format="yyyy-MM"
                      :placeholder="'请选择'+item.label"
                    />
                    <el-date-picker
                      v-else-if="item.type==='year'"
                      v-model="SearchformInline[index]"
                      :disabled="item.disabled"
                      clearable
                      type="year"
                      style="width: 100%"
                      value-format="yyyy"
                      format="yyyy"
                      :placeholder="'请选择'+item.label"
                    />
                    <el-date-picker
                      v-else-if="item.type==='daterange'"
                      v-model="SearchformInline[index]"
                      :disabled="item.disabled"
                      clearable
                      type="daterange"
                      style="width: 100%"
                      value-format="yyyy-MM-dd"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />

                    <el-date-picker
                      v-else-if="item.type==='datetimerange'"
                      v-model="SearchformInline[index]"
                      :disabled="item.disabled"
                      clearable
                      style="width: 100%"
                      value-format="yyyy-MM-dd HH:mm"
                      format="yyyy-MM-dd HH:mm"
                      type="datetimerange"
                      range-separator="至"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                    />
                    <template v-else-if="item.type==='radio'">
                      <el-radio v-model="SearchformInline[index]" :label="item.option[0].value">{{ item.option[0].label }}</el-radio>
                      <el-radio v-model="SearchformInline[index]" :label="item.option[1].value">{{ item.option[1].label }}</el-radio>
                    </template>
                  </el-form-item>
                </el-col>
              </transition>
            </template>
          </el-row>
        </el-col>
        <el-col v-if="direction === 'row'" :span="4">
          <el-form-item  style="text-align: center">
            <el-button size="mini" icon="el-icon-refresh" plain @click="clearSearchformInline">重置</el-button>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-col>
        <el-col v-else :span="3">
          <el-form-item style="text-align: center">
            <div class="flex-column" style="align-items: center;">
              <el-button size="mini" type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
              <el-button size="mini" icon="el-icon-refresh" plain style="margin-left: 0;margin-top: 20px" @click="clearSearchformInline">重置</el-button>
              <!--            <el-button v-if="data.length>7" size="mini" type="text" @click="handleFlag">{{ !flag? '展开':'收起' }}<i :class="icon" /></el-button>-->
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
// import Clickoutside from 'element-ui/src/utils/clickoutside'
export default {
  name: 'Index',
  // directives: { Clickoutside },
  props: {
    span: {
      type: Number,
      default: 8
    },
    data: {
      type: Array,
      default: () => []
    },
    title: {
      type: String,
      default: ''
    },
    // 按钮排列方向
    direction: {
      type: String,
      default: 'column'
    }
  },
  data() {
    return {
      showScreen: false,
      flag: false,
      icon: 'el-icon-caret-bottom',
      SearchformInline: [],
      Inline: {},
      checked: []
    }
  },
  computed: {
    btnSpan() {
      let spanLength = 0
      let data = []
      if (this.data.length <= 7 || this.flag) {
        data = this.data
      } else {
        data = this.data.slice(0, 7)
      }
      data.forEach((item) => {
        if (item.type === 'daterange' || item.type === 'datetimerange') {
          spanLength = spanLength + 10
        } else {
          spanLength = spanLength + this.span
        }
      })
      return (spanLength % 24) === 0 ? 24 : 6 // 24 - (spanLength % 24)
    }
  },
  watch: {
    data: { // 深度监听，可监听到对象、数组的变化
      handler(newV, oldV) {
        this.data = newV
        this.data.forEach((item, index) => {
          if (item.value) {
            this.SearchformInline[index] = item.value
          }
        })
      },
      deep: true,
      immediate: true
    },
    SearchformInline: {
      handler(newV, oldV) {
        this.SearchformInline = newV
        this.getData()
        this.$emit('getData', this.Inline)
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    clearSearchformInline() {
      this.SearchformInline = this.$options.data().SearchformInline
      /* 异步操作*/
      this.$emit('onClean')
    },
    handleClose(e) {
      const tag = e.target.nodeName.toLowerCase()
      if (tag !== 'svg' && tag !== 'span' && tag !== 'i' && tag !== 'button') { this.showScreen = false }
    },
    handleFlag() {
      this.flag = !this.flag
      if (!this.flag) {
        this.icon = 'el-icon-caret-bottom'
      } else {
        this.icon = 'el-icon-caret-top'
      }
    },
    /* 查询方法*/
    onSubmit() {
      /* 异步操作*/
      // console.log(this.Inline)
      this.$emit('onSearch', this.Inline, status => {
        if (status) this.showScreen = false
      })
    },
    selectAll(index) {
      this.SearchformInline[index] = []
      if (this.checked[index]) {
        this.data[index].option.forEach((item) => {
          this.SearchformInline[index].push(item.value)
        })
      } else {
        this.SearchformInline[index] = []
      }
      this.getData()
      this.$emit('getData', this.Inline)
    },
    changeSelect(val, index) {
      this.checked[index] = val.length === this.data[index].option.length
    },
    getData() {
      this.data.forEach((item, index) => {
        this.Inline[item.model] = this.SearchformInline[index]
      })
    },
    changeData(index, val) {
      this.SearchformInline[index] = val
      this.$set(this.SearchformInline, index, val)
      this.getData()
    },
    onInputFocus(name, model) {
      this.$emit(name, model)
    }
  }
}
</script>

<style scoped lang="scss">
.screen-body {
  padding: 10px;
  background-color: $base-content-background;
  //box-shadow:0 2px 12px 0 rgba(0,0,0,.1);
  //-webkit-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  //-moz-box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  border-radius: 8px;
  .title {
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 8px;
    color: #FFFFFF;
  }
  .screen-footer {
    justify-content: flex-end;
    padding-top: 20px;
    .footer-button {
      width: 120px;
    }
  }
}
::v-deep {
  .el-form-item__label {
    text-align: right !important;
  }
}
</style>
